<template>
  <div class="book-recommend">
    <p class="recom-title">{{title}}</p>
    <div class="recom-all">
      <div class="recom-item" v-for="item in recommend" :key="item.bookId">
        <router-link :to="'/index/bookDetail?id='+item.bookId" :target="global.goBookDetailType">
          <img :src="item.picUrl" alt="" class="recom-item-img">
          <div class="recom-item-cont">
            <p class="recom-item-title">{{item.bookName}}</p>
            <router-link :to="'/index/author?name='+item.authorName"><p class="recom-item-author">作者：{{item.authorName}}</p></router-link>
            <div class="recom-item-desc" v-html="item.bookDesc"></div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    title:String,
    recommend:Array
  }
}
</script>

<style lang='scss' scoped>
.book-recommend{
  width: 705px;
  display: inline-block;
  margin-right: 10px;
  .recom-title {
    width: 705px;
    height: 40px;
    margin: 0;
    font-size: 20px;
    border: 1px solid #E0E0E0;
    border-width: 0 0 2px 0;
    font-weight: bold;
    color: #333333;
  }
  .recom-all {
    width: 705px;
    display: flex;
    padding: 10px 0 5px 0;
    flex-wrap: wrap;
    .recom-item {
      width: 50%;
      margin: 15px 0;
      height: 120px;
      .recom-item-img {
        width: 100px;
        height: 120px;
      }

      .recom-item-cont {
        width: calc(100% - 100px - 10px - 10px);
        float: right;
        overflow: hidden;
        height: 100%;
        margin-right: 10px;
        p{
          margin-top: 0;
        }
        .recom-item-title {
          color: #313131;
          font-size: 17px;
          overflow: hidden; 
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .recom-item-title:hover{
          color: $base-color;
        }
        .recom-item-author {
          font-size: 13px;
          color: #989898;
          overflow: hidden; 
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .recom-item-author:hover{
          color: $base-color;
        }
        .recom-item-desc {
          font-size: 13px;
          color: #7D7D7D;
          overflow: hidden;
          height: calc(100% - 22px - 10px - 17px - 10px - 10px)
        }
        .recom-item-desc:hover{
          color: $base-color;
        }
      }
    }
  }
}
</style>